/**
* @Description: 供应商查询-列表
* @author  tangbin
* @date 2023/4/18
*/

<template>
  <div class="app-containers">
    <query-table-render
        ref="queryTable"
        :query-model="queryModel"
        :table-request="requestTableData"
        :table-column="tableColumns"
        :toolbar-render="toolbarRnd"
        :transform-query="transformQuery"
        :title-render="titleRender"
        @on-operator="onOperator"
        :show-table-batch-view="showTableBatchView"
    >
      <template v-slot:form>
        <el-form-item label="渠道名称" prop="tenantId">
          <!-- :filter-method="tenantNameFilter" 
            @focus="tenantNameFocus" -->
          <el-select v-model="queryModel.tenantId" placeholder="请选择" style="width:100%" 
            clearable filterable 
          >
            <el-option
              v-for="item in channelInfos"
              :key="item.id"
              :label="item.name"
              :value="item.id"/>
          </el-select>
        </el-form-item>
        <el-form-item label="供应商编码" prop="code">
          <el-input v-model="queryModel.code" placeholder="请输入" clearable @keyup.enter.native="searchListQuery"/>
        </el-form-item>
        <el-form-item label="供应商名称" prop="name">
          <el-input v-model="queryModel.name" placeholder="请输入" clearable @keyup.enter.native="searchListQuery"/>
        </el-form-item>
        <el-form-item label="供应商类型" prop="supplierType">
          <el-select v-model="queryModel.supplierType" placeholder="请选择" style="width:100%" clearable>
            <el-option
              v-for="item in dict.type.supplier_type"
              :key="item.value"
              :label="item.label"
              :value="item.value"/>
          </el-select>
        </el-form-item>
        <el-form-item label="公司电话" prop="companyMobile">
          <el-input v-model="queryModel.companyMobile" placeholder="请输入" clearable @keyup.enter.native="searchListQuery"/>
        </el-form-item>
        <el-form-item label="供应商状态" prop="status">
          <el-select v-model="queryModel.status" placeholder="请选择" style="width:100%" clearable>
            <el-option
              v-for="item in dict.type.supplier_status"
              :key="item.value"
              :label="item.label"
              :value="item.value"/>
          </el-select>
        </el-form-item>
      </template>
    </query-table-render>
  </div>
</template>


<script>
import {checkPermi} from '@/utils/permission.js'
import QueryTableRender from "@/components/QueryTableRender";
import {supplierList, tenantOptions} from '@/api/basic/supplier.js'


export default {
  name: "SupplierQuery",
  dicts: ['supplier_type', 'supplier_status'], // 供应商类型 供应商状态
  components: {QueryTableRender},
  data() {
    return {
      queryModel: {}, // 查询参数
      tableColumns: [], // 列表
      channelInfos: [], // 渠道名称
      channelInfosCopy: [], // 渠道名称copy
      // customerTypeOptions: [{label: '个人', value: 1}, {label: '单位', value: 2}], // 供应商类型
      // statusOptions: [{label: '生效', value: 'VALID'}, {label: '失效', value: 'INVALID'}], // 供应商状态 生效VALID 失效INVALID
      showTableBatchView: false, // 是否显示批量视图
    }
  },
  created() {
    this.setupQueryModel();
    this.setupTableColumns();
  },
  mounted() {
    this.getTenantOptions();
  },
  activated() {
    this.getTenantOptions();
  },
  watch: {
    $route(route) {
      if (route.name == 'CustomersManage') {
        this.onRefreshTable();
      }
    },
  },
  methods: {
    /**
     * 初始化查询参数
     */
     setupQueryModel() {
      this.queryModel = {
        tenantId: undefined, // 渠道名称(租户id)
        code: undefined, // 供应商编码
        name: undefined, // 供应商名称
        supplierType: undefined, // 供应商类型
        companyMobile: undefined, // 公司电话
        status: undefined, // 供应商状态
      };
    },

    setupTableColumns() {
      this.tableColumns = [
        {
          width: '60',
          type: 'selection',
          align: 'center',
        },
        {
          label: '序号',
          width: '60',
          type: 'index',
          increment: true
        },
        {
          prop: 'code',
          label: '供应商编码',
          minWidth: '150',
        },
        {
          prop: 'name',
          label: '供应商名称',
          minWidth: '160',
          showOverflowTooltip: true,
        },
        {
          prop: 'supplierType',
          label: '供应商类型',
          minWidth: '120',
          render: (h, text) => {
            let show = text;
            this.dict.type.supplier_type.some((item) => {
              if (item.value === text) {
                show = item.label;
                return true;
              }
            });
            return show;
          }
        },
        {
          prop: 'companyMobile',
          label: '公司电话',
          minWidth: '140',
        },
        {
          prop: 'contactName',
          label: '联系人',
          minWidth: '140',
        },
        {
          prop: 'contactMobile',
          label: '联系电话',
          minWidth: '140',
        },
        {
          prop: 'companyAddress',
          label: '公司地址',
          minWidth: '180',
          showOverflowTooltip: true,
        },
        {
          prop: 'status',
          label: '供应商状态',
          minWidth: '130',
          render: (h, text) => {
            let show = text;
            this.dict.type.supplier_status.some((item) => {
              if (item.value === text) {
                show = item.label;
                return true;
              }
            });
            return show;
          }
        },
        {
          prop: 'customerTenantName',
          label: '渠道名称',
          minWidth: '160',
          showOverflowTooltip: true,
        },
        {
          label: '操作',
          width: '130',
          type: 'operator',
          align: "left",
          fixed: 'right',
          operators: record => { return this.operatorsFunc(record)}
        },
      ]  
    },

    /**
     * 查询列表
     * @param {*} queryParams
     */
     requestTableData(queryParams) {
      return supplierList(queryParams).then(respData => {
        // console.log('respData=', respData);
        return {
          success: true,
          total: respData.data.total,
          data: respData.data.records,
        }
      });
    },

    /**
     * 刷新列表
     */
    onRefreshTable(){
      this.$refs['queryTable'].refreshTable()
    },

    /**
     * 渲染功能列表
     * @param {*} h 
     */
     toolbarRnd(h){
      let list = [];
      if (checkPermi(['basic-data:supplier:export'])) {
        list.push(<el-button type="primary" icon="el-icon-download" size="small" vOn:click={() => this.handleExport()}>导出</el-button>);
      }
      return list;
    },

    operatorsFunc() {
    let list = [];
    if (checkPermi(['basic-data:supplier-query:detail'])) {
      list.push({label: '详情', command: 'detail'});
    }
    
    return list;
   },

    /**
     * 标题渲染
     * @param {*} h 
     */
    titleRender(h) {
      return <div>
        <span style="display:inline-block; background-color: #1890FF;margin-bottom: -2px; margin-right: 8px; width: 3px; height: 14px"></span>
        <span style="display: inline-block; color: #333333; font-size: 16px;">供应商列表</span>
      </div>;
    },

    /**
     * 搜索列表查询
     */
     searchListQuery() {
      this.$refs['queryTable'].submitQuery();
    },

    /**
     * 修改参数格式
     * @param {*} queryData 
     */
    transformQuery(queryData) {
      let transParams = {}
      for (let keyName in queryData) {
          transParams[keyName] = queryData[keyName]
      }
      return transParams
    },

    /**
     * 操作页面
     * @param {*} command 
     * @param {*} record 
     */
    onOperator(command, record) {
      let query = {
        id: record.id,
        info: JSON.stringify(record)
      };
      if('detail' === command){
        this.$router.push({path: 'SupplierQueryDetail', query: query});
      }
    },

    /**
     * 导出
     */
    handleExport() {

      const selectedList = this.$refs['queryTable'].getSelection();
      let list = [];
      if (selectedList && selectedList.length > 0) {
        list = selectedList.map(item => {
          return item.id
        });
      }
      console.log('list=', list);
      let param = {};
      if (list.length > 0) {
        param = {idList: list};
      } else {
        param = JSON.parse(JSON.stringify(this.queryModel));
        delete param.pageNum;
        delete param.pageSize;
      }
      
      let date = this.$moment(new Date()).format("YYYY-MM-DD");
      this.download('/basic-data/supplier/export', param, `供应商查询_${date}.xlsx`)
    },

    /**
     * 输入渠道名称为得到焦点调用
     * @param {*} e 
     */
     tenantNameFocus(e) {
      this.channelInfos = this.channelInfosCopy;
    },

    /**
     * 渠道名称筛选
     * @param {*} val 
     */
    tenantNameFilter(val) {
      if (val) {
        this.channelInfos = this.channelInfosCopy.filter((item) => {
          if (!!~item.name.indexOf(val)) {
            return true;
          }
        });
        if (this.channelInfos && this.channelInfos.length == 1) {
          this.$nextTick(() => {
            this.queryModel.tenantId = this.channelInfos[0].id;
          });
        } else {
          this.queryModel.tenantId = undefined;
        }
      } else {
        this.channelInfos = this.channelInfosCopy;
      }
    },

    /**
     * 得到渠道(租户)列表
     */
    getTenantOptions() {
      tenantOptions().then(res => {
        if (res.code == 200) {
          this.channelInfos = res.data;
        }
      }).catch(err => {
        
      });
    },

  },
}
</script>


<style lang="scss" scoped>
</style>